<template>
 <div class='test-scroll-bar'>
   <button @click="showBar = !showBar">{{showBar ? '隐藏' : '显示'}}</button>
   <div v-show="showBar">
     <scroll-bar style="border-top: 1px solid #f00; border-bottom: 1px solid #f00;" :barWidth="10" :isShowScroll="showBar" :wrapHeight="400" :rollingRatio="1" barBackground="#414141" trackBackground="#ccc">
      <div-compoent></div-compoent>
    </scroll-bar>
   </div>
 </div>
</template>

<script>
import ScrollBar from '@/components/ScrollBar/ScrollBar'
import DivCompoent from '@/components/DivCompoent'
export default {
  components: {
    ScrollBar,
    DivCompoent
  },
  data () {
    return {
      showBar: false
    }
  }
}
</script>

<style scoped>
.test-scroll-bar {
  margin: 30px auto;
  width: 500px;
  height: 500px;
  background: rgba(0, 0, 0, .3);
}
</style>
